<template>
	<view>
		<view class="page page-bottom-bar drugs-edit">
			<!-- 药品信息 -->
			<view class="drugs-list">
				<view class="item flex-row-between">
					<view class="left bg-cover"  :style="{backgroundImage: 'url(' + drugInfo.logo + ')'}"></view>
					<view class="right nob">
						<view class="p1 font14">{{drugInfo.goods_name}}</view>
						<view class="p2 font12 font-969696">{{drugInfo.manufacturer ? drugInfo.manufacturer : '暂无厂商'}}</view>
						<view class="p3 font14 font-ff4646">￥{{drugInfo.spec_info?drugInfo.spec_info.goods_price:0}}</view>
					</view>
				</view>
			</view>
			<view class="hr4"></view>
			<!-- 表单 -->
			<view class="form-box font14">
				<view class="item flex-row-between">
					<view>药品数量</view>
					<view class="flex-row-end">
						<uni-number-box v-model="form.number" :min="1" @change="numChange"></uni-number-box>
						<text>盒</text>
					</view>
				</view>
				<view class="item flex-row-between">
					<view>用药频次</view>
					<view :style="{color: picker1.selected ? '#1e1e1e' : '#c8c8c8'}" @click="Onone">
						<text>{{picker1.selected ? picker1.selected.title : '选择用药频次'}}</text>
						<uni-icons type="arrowright" size="10" color="#3f3f3f"></uni-icons>
					</view>
				</view>
				<view class="item flex-row-between">
					<view>单次用量</view>
					<view :style="{color: picker2.selected ? '#1e1e1e' : '#c8c8c8'}" @click="Ontwo">
						<text>{{picker2.selected ? picker2.selected.title : '选择单次用量'}}</text>
						<uni-icons type="arrowright" size="10" color="#3f3f3f"></uni-icons>
					</view>
				</view>
				<view class="item flex-row-between">
					<view>用药方法</view>
					<view :style="{color: picker3.selected ? '#1e1e1e' : '#c8c8c8'}" @click="Onthree">
						<text>{{picker3.selected ? picker3.selected.title : '选择用药方法'}}</text>
						<uni-icons type="arrowright" size="10" color="#3f3f3f"></uni-icons>
					</view>
				</view>
				<view class="desc">
					<view>备注</view>
					<view>
						<textarea :value="form.remark" @input="Ontextarea" placeholder="请输入备注" placeholder-class="placeholderClass"></textarea>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="fix-bottom-btn flex-row-center">
			<view class="btn flex-row-center font-ffffff font15" @click="submit">保存</view>
		</view>
		
		<!-- 频次 -->
		<Compicker ref="Compicker1" title="用药频次" @Onreturn="Onreturn1"></Compicker>
		<!-- 用量 -->
		<Compicker ref="Compicker2" title="单次用量" @Onreturn="Onreturn2"></Compicker>
		<!-- 方法 -->
		<Compicker ref="Compicker3" title="用药方法" @Onreturn="Onreturn3"></Compicker>
	</view>
</template>

<script>
	import Compicker from '@/components/Compicker.vue'
	export default {
		components: { Compicker },
		data() {
			return {
				mode: '', // add新增，edit编辑
				drugId: '', // 药品id
				drugInfo: {}, // 药品信息
				img: '',
				picker1: { selected: null, list: [] }, // 频次
				picker2: { selected: null, list: [] }, // 用量
				picker3: { selected: null, list: [] }, // 方法
				form: {
					number: 1,
					remark: ''
				},
				drugs: [], // 已有的药品
				currntDrug: {}, // 当前编辑的药品
			}
		},
		onLoad(options) {
			let $this = this
			this.drugId = options.id
			this.mode = options.mode
			
			// 药品详情
			this.$Http({
				url: 'goodsDetails',
				token: false,
				data: {
					goods_id: options.id
				}
			}).then(res => {
				if (res.code == 1) {
					res.data.logo = $this.$store.state.http_img + res.data.logo
					$this.drugInfo = res.data
				}
			})
		},
		onShow() {
			let $this = this
			
			// 从缓存中拿取药品列表信息
			let $drugs = uni.getStorageSync("drugs")
			this.drugs = $drugs ? JSON.parse($drugs) : []
			
			if (this.mode == 'edit') {
				this.drugs.forEach(item => {
					if (item.id == this.drugId) {
						$this.currntDrug = item
						$this.form.number = parseInt(item.number)
						$this.form.remark = item.remark
					}
				})
			}
			
			// 药品用法
			this.$Http({
				url: 'usage',
				token: false
			}).then(res => {
				if (res.code == 1) {
					let index = 0
					res.data.forEach((item, i) => {
						item.title = item.name
						if (item.name == $this.currntDrug.usage) {
							index = i
							$this.picker3.selected = item
						}
					})
					$this.$refs.Compicker3.Ondata(res.data, index)
				}
			})
			// 药品用量
			this.$Http({
				url: 'consumption',
				token: false
			}).then(res => {
				if (res.code == 1) {
					let index = 0
					res.data.forEach((item, i) => {
						item.title = item.name
						if (item.name == $this.currntDrug.consumption) {
							index = i
							$this.picker2.selected = item
						}
					})
					$this.$refs.Compicker2.Ondata(res.data, index)
				}
			})
			// 药品频次
			this.$Http({
				url: 'frequency',
				token: false
			}).then(res => {
				if (res.code == 1) {
					let index = 0
					res.data.forEach((item, i) => {
						item.title = item.name
						if (item.name == $this.currntDrug.frequency) {
							index = i
							$this.picker1.selected = item
						}
					})
					$this.$refs.Compicker1.Ondata(res.data, index)
				}
			})
		},
		methods: {
			// 数量change
			numChange (e) {
				this.form.number = parseInt(e)
			},
			// textarea输入
			Ontextarea(e) {
				this.form.remark = e.detail.value
			},
			// 下拉选择
			Onone() {
				this.$refs.Compicker1.Onopen()
			},
			Onreturn1(e) {
				this.picker1.selected = e
			},
			Ontwo() {
				this.$refs.Compicker2.Onopen()
			},
			Onreturn2(e) {
				this.picker2.selected = e
			},
			Onthree() {
				this.$refs.Compicker3.Onopen()
			},
			Onreturn3(e) {
				this.picker3.selected = e
			},
			// 保存
			submit () {
				if (!this.picker1.selected) {
					wx.showToast({ title: '请选择用药频次', icon: 'none' })
					return false
				}
				if (!this.picker2.selected) {
					wx.showToast({ title: '请选择单次用量', icon: 'none' })
					return false
				}
				if (!this.picker3.selected) {
					wx.showToast({ title: '请选择用药方法', icon: 'none' })
					return false
				}
				let obj = {
					id: this.drugId,
					name: this.drugInfo.goods_name,
					number: this.form.number,
					usage: this.picker3.selected.title,
					consumption: this.picker2.selected.title,
					frequency: this.picker1.selected.title,
					remark: this.form.remark
				}
				if (this.mode == 'add') {
					this.drugs.push(obj)
				} else {
					this.drugs.forEach(item => {
						if (item.id == this.drugId) {
							item.name = obj.name
							item.number = obj.number
							item.usage = obj.usage
							item.consumption = obj.consumption
							item.frequency = obj.frequency
							item.remark = obj.remark
						}
					})
				}
				uni.setStorage({
					key: 'drugs',
					data: JSON.stringify(this.drugs)
				});
				
				// 返回
				if (this.mode == 'add') {
					console.log('add')
					uni.navigateBack({ delta: 2 });
				} else {
					console.log('edit')
					uni.navigateBack({ delta: 1 });
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
